<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diana - Designe Manager</title>
    <!-- 网站描述 -->
    <meta name="description" content="">

    <link rel="stylesheet" href="./css/style.min.css">
    <link rel="shortcut icon" href="./assets/public/favicon.svg"/>
    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
</head>
<body>
    <div class="head">
        <div class="main">
            <a href="./index.html" class="logo"><img src="./assets/public/logo_text.svg"></a>
            <div class="menu">
                <li class="magical btn nav" onclick="window.location.href='./index.html'">Home</li>
                <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
            </div>
            <div class="menu" id="menu-expand">
                <li class="magical btn skin" id="menu-expand-child"><i class="icon menu-icon"></i></li>
            </div>
            <div id="menu-panel">
                <div class="menu-panel-content">
                    <li class="magical btn nav" onclick="window.location.href='./index.html'">Home</li>
                    <li class="magical btn" onclick="window.location.href='./about.html'">About</li>
                </div>
            </div>
        </div>
        <blockquote><img src="./assets/public/logo.svg"></blockquote>
    </div>
    <div class="index">
        <div class="hello">
            <div class="title">
                <div class="title-hi">Hi, I'm</div>
                <a class="title-name" href="/">Diana</a>
            </div>
            <div class="hello-desc" id="typed"></div>
        </div>
        <div class="content-divider"></div>
        <div class="quickly-link">
            <div class="title-hi">What did I do</div>
            <div class="loader"></div>
            <div class="link-card">
                <div class="link-card-list">
                    <div class="magical link-card-item">
                        <a href="https://giraffetools.com/" target="_blank">
                            <img src="./assets/index/giraffe.png" alt="">
                            <div class="info">
                                <div class="info-title">Graffetools</div>
                                <div class="info-desc">You Best Time Saver Tools</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.amazon.com/stores/page/E781A224-0A73-4B28-9118-4777CA40DF78" target="_blank">
                            <img src="./assets/index/amazon.png" alt="">
                            <div class="info">
                                <div class="info-title">Graffetools on amazon</div>
                                <div class="info-desc">We'll do the heavy lifting</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.zcool.com.cn/work/ZNjg1MDIxOTI=.html" target="_blank">
                            <img src="./assets/index/zcool.png" alt="">
                            <div class="info">
                                <div class="info-title">Zcool Portfolio</div>
                                <div class="info-desc">2021-2024 My Portfolio</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.instagram.com/giraffetools/" target="_blank">
                            <img src="./assets/index/ins.png" alt="">
                            <div class="info">
                                <div class="info-title">Instagram</div>
                                <div class="info-desc">@Giraffetools官方ins账号</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.weibo.com/n/TagTree%E5%B9%BB%E6%83%B3%E5%88%9B%E4%BD%9C" target="_blank">
                            <img src="./assets/index/weibo.png" alt="">
                            <div class="info">
                                <div class="info-title">tagtree 官方微博</div>
                                <div class="info-desc">运营设计和活动策划</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                    <div class="magical link-card-item">
                        <a href="https://www.youtube.com/channel/UCF_v-_N8myPMMZ7f6FWpArg" target="_blank">
                            <img src="./assets/index/youtbe.png" alt="">
                            <div class="info">
                                <div class="info-title">Youtube</div>
                                <div class="info-desc">@Giraffetools官方youtube账号</div>
                            </div>
                            <div class="icon icon-arrow">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                                    <path d="M10.55 7.58332H1.16663V6.41665H10.55L7.75415 3.62082L8.5791 2.79587L12.1645 6.3813C12.5062 6.72299 12.5062 7.27701 12.1645 7.61873L8.5791 11.2042L7.75415 10.3792L10.55 7.58332Z" fill="#B3B3C1"></path>
                                </svg>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="copyright">
            <div>© 2023 Design by Diana</div>
            <span>|</span>
            <div class="fillings">
                <a href="/" target="_blank">Diana</a>
        </div>
    </div>
    <div class="widget">
        <div class="shape-light"></div>
        <div class="shape-star">
            <div class="rising-stars rising-stars-visible">
                <div style="height:1px;width:1px"></div>
                <div style="height:2px;width:2px"></div>
                <div style="height:1px;width:1px"></div>
            </div>
        </div>
        <div class="shape-earth"></div>
    </div>
</body>
<script>
    // 打字效果，感谢 typed.js: https://mattboldt.github.io/typed.js/docs/
    const options = {
        strings: [
            ">_ welcome to my secret garden ^1000",
            ">_ and let's explore it now ^1000",
        ],
        typeSpeed: 50, // 打印速度
        backSpeed: 20, // 回退速度
        startDelay: 300, // 开始之前的延迟300毫秒
        loop: true, // 是否循环
        showCursor: false, // 不显示光标
    };
    const typed = new Typed('#typed', options);
</script>
<script src="./js/main.min.js"></script>
</html>